<template>
  <div class="zscf_bottom_wper common-footer">
    <div class="zscf_bottom px1100 clearfix">
      <div v-for="(category,index) in categories" :key="index" class="category">
        <!--        {{ category }}-->
        <p>
          <nuxt-link :to="`/search?c=${category._id}`" class="title">
            {{ category.title }}
          </nuxt-link>
        </p>
        <ul class="cates">
          <li v-for="(item,a) in category.children" :key="a" class="detail">
            <!--            <nuxt-link "></nuxt-link>-->
            <!--            {{ item.title }} - {{ item }}-->
            <nuxt-link :to="`/search?c=${item._id}`" class="title2">
              {{ item.title }}
            </nuxt-link>
          </li>
        </ul>
      </div>

      <p>
        © 2021 英联智融
        <a class="text-color" href="https://beian.miit.gov.cn" target="_blank">陕ICP备2021008778号-1</a>
      </p>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'CommonFooter',
  computed: {
    ...mapState(['categories'])
  }
}
</script>
<style lang="scss" scoped>
.zscf_bottom_wper{
}
.zscf_bottom{
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}

.common-footer{
  //position: absolute;
  //bottom: 0;
}
.title{
  display: inline-block;
  font-size: 16px;
  font-style: normal;
  color: #f8b551;
  margin-bottom: 15px;
}
.title2{
  display: inline-block;
  font-size: 12px;
  font-style: normal;
  color: #8d8d8d;
  margin-bottom: 5px;
}
.text-color{
  color: #FFFFFF;
}
</style>
